<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
		   <div class="row">
		      <div class="col-lg-12 col-xs-12">
				  <img src="images/lb-001.jpg" />
				  
			  </div>
		      <div class="col-lg-6 col-xs-6">
				  <img src="images/lb-002.jpg" class="img-circle" style="width: 200px;height: 200px;" />
			  </div>      
			  <div class="col-lg-6 col-xs-6">
				  <img src="images/lb-003.jpg" />
			  </div>  
				 <div class=" col-lg-offset-6 col-lg-6 col-xs-6">
				 				  <img src="images/lb-005.jpg" />
				 </div>
				  <div class="col-lg-6 col-xs-6">
				  <h1>上课就应该学习<small>睡觉是不对的</small></h1>
				  <small>本行内容是在标签内</small><br>
				  <strong>本行内容是在标签内</strong><br>
				  <em>本行内容是在标签内，并呈现为斜体</em><br>
				  <p class="text-left">向左对齐文本</p>
				  <p class="text-center">居中对齐文本</p>
				  <p class="text-right">向右对齐文本</p>
				  <p class="text-muted">本行内容是减弱的</p>
				  <p class="text-primary">本行内容带有一个 primary class</p>
				  <p class="text-success">本行内容带有一个 success class</p>
				  <p class="text-info">本行内容带有一个 info class</p>
				  <p class="text-warning">本行内容带有一个 warning class</p>
				  <p class="text-danger">本行内容带有一个 danger class</p>
				  </div>
				  <div class="col-lg-12">
					  
					  <table class="table table-striped">
					    <caption>条纹表格布局</caption>
					    <thead>
					      <tr>
					        <th>名称</th>
					        <th>城市</th>
					        <th>邮编</th>
					      </tr>
					    </thead>
					    <tbody>
					      <tr>
					        <td>Tanmay</td>
					        <td>Bangalore</td>
					        <td>560001</td>
					      </tr>
					      <tr>
					        <td>Sachin</td>
					        <td>Mumbai</td>
					        <td>400003</td>
					      </tr>
					      <tr>
					        <td>Uma</td>
					        <td>Pune</td>
					        <td>411027</td>
					      </tr>
					    </tbody>
						<tfoot>
							<tr>
								<td colspan="3" style="text-align: right;">
									<ul class="pagination" style="margin-right: 50px;">
									    <li><a href="#">&laquo;</a></li>
									    <li class="active"><a href="#">1</a></li>
									    <li class="disabled"><a href="#">2</a></li>
									    <li><a href="#">3</a></li>
									    <li><a href="#">4</a></li>
									    <li><a href="#">5</a></li>
									    <li><a href="#">&raquo;</a></li>
									</ul>
								</td>
							</tr>
							
							
						</tfoot>
					  </table>
					  
				  </div>
				  <div class="col-lg-12">
					  <form role="form">
					    <div class="form-group">
					      <label for="name">圈子名称：</label>
					      <input type="text" class="form-control" id="name" placeholder="请输入名称">
					    </div>
						<div class="form-group">
						  <label for="name">圈子简介：</label>
						  <input type="text" class="form-control" id="name" placeholder="请输入名称">
						</div>
					    <div class="form-group">
					      <label for="inputfile">圈子Logo</label>
					      <input type="file" id="inputfile">
					      <p class="help-block">请上传不超过5M的图片</p>
					    </div>
					    <div class="checkbox">
					      <label>
					        <input type="checkbox">请打勾
					      </label>
					    </div>
					    <button type="submit" class="btn btn-default">提交</button>
					  </form>
					  
					  
				  </div>
		   </div>
			<div class="col-lg-12">
				<div class="input-group">
				    <input type="text" class="form-control">
				    <span class="input-group-addon">搜索</span>
				</div>
				
			</div>
			<div class="col-lg-12">
				<nav class="navbar navbar-default" role="navigation">
				    <div class="container-fluid">
				    <div class="navbar-header col-lg-4">
				       <img src="images/logo.PNG" style="height: 60px;"/>
				    </div>
				    <div class="col-lg-offset-4 col-lg-4">
				        <ul class="nav navbar-nav">
				            <li class="active"><a href="#">首页</a></li>
				            <li><a href="#">圈子</a></li>
				            <li class="dropdown">
				                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
				                    忧虑
				                    <b class="caret"></b>
				                </a>
				                <ul class="dropdown-menu">
				                    <li><a href="#">心情</a></li>
				                    <li><a href="#">学习</a></li>
				                    <li><a href="#">感情</a></li>
				                    <li >生活</li>
				                    <li><a href="#">美食</a></li>
				                   
				                </ul>
				            </li>
				        </ul>
				    </div>
				    </div>
				</nav>
			</div>
			<div class="col-lg-12">
				<ul class="breadcrumb">
				    <li><a href="#">首页</a></li>
				    <li><a href="#">圈子2008</a></li>
				    <li class="active">热门忧虑</li>
				</ul>
			</div>
			<div class="col-lg-12">
				
				<div id="myCarousel" class="carousel slide">
				    <!-- 轮播（Carousel）指标 -->
				    <ol class="carousel-indicators">
				        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				        <li data-target="#myCarousel" data-slide-to="1"></li>
				        <li data-target="#myCarousel" data-slide-to="2"></li>
				    </ol>   
				    <!-- 轮播（Carousel）项目 -->
				    <div class="carousel-inner">
				        <div class="item active">
				            <img src="images/lb-001.jpg" style="width: 100%;" alt="First slide">
				        </div>
				        <div class="item">
				            <img src="images/lb-002.jpg" alt="Second slide">
				        </div>
				        <div class="item">
				            <img src="images/lb-003.jpg" alt="Third slide">
				        </div>
				    </div>
				    <!-- 轮播（Carousel）导航 -->
				    <a class="carousel-control left" href="#myCarousel" 
				       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
				    <a class="carousel-control right" href="#myCarousel" 
				       data-slide="next">&rsaquo;</a>
				</div>
			</div>
			
			
		</div>

		
	</body>
</html>
